<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会员中心 - ymbxCloud</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://unpkg.com/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0FC6C2',
                        neutral: '#F5F7FA',
                        dark: '#1D2129',
                        vip: {
                            silver: '#E5E7EB',
                            gold: '#FBBF24',
                            diamond: '#38BDF8'
                        }
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .transition-all-300 {
                transition: all 0.3s ease;
            }
            .hover-scale {
                @apply hover:scale-[1.02] transition-all duration-300;
            }
            .text-gradient {
                @apply bg-clip-text text-transparent bg-gradient-to-r from-primary to-secondary;
            }
            .vip-card-shadow {
                box-shadow: 0 10px 30px -5px rgba(22, 93, 255, 0.15);
            }
            .pricing-card-active {
                @apply border-primary scale-105 z-10;
            }
        }
    </style>
</head>
<body class="font-inter bg-neutral min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-50">
        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
            <div class="flex items-center space-x-2">
                <i class="fa fa-cloud text-primary text-2xl"></i>
                <h1 class="text-xl font-bold text-dark">文件管理系统</h1>
            </div>
            
            <div class="flex items-center space-x-4">
                <nav class="hidden md:flex space-x-6">
                    <a href="#" class="text-dark hover:text-primary transition-all-300 flex items-center">
                        <i class="fa fa-home mr-1"></i> 首页
                    </a>
                    <a href="#" class="text-dark hover:text-primary transition-all-300 flex items-center">
                        <i class="fa fa-folder mr-1"></i> 文件
                    </a>
                    <a href="#" class="text-primary font-medium flex items-center">
                        <i class="fa fa-diamond mr-1"></i> 会员
                    </a>
                </nav>
                
                <div class="flex items-center space-x-3">
                    <button id="notifications-btn" class="relative p-2 text-dark hover:text-primary transition-all-300">
                        <i class="fa fa-bell-o text-lg"></i>
                        <span class="absolute top-0 right-0 h-4 w-4 bg-red-500 rounded-full flex items-center justify-center text-white text-xs">3</span>
                    </button>
                    
                    <div class="flex items-center space-x-2 cursor-pointer group">
                        <div class="h-9 w-9 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                            <i class="fa fa-user"></i>
                        </div>
                        <div class="hidden md:block">
                            <p class="text-sm font-medium text-dark">张小明</p>
                            <p class="text-xs text-gray-500">普通用户</p>
                        </div>
                        <i class="fa fa-angle-down text-gray-500 group-hover:rotate-180 transition-transform duration-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="flex-grow container mx-auto px-4 py-6">
        <!-- 面包屑导航 -->
        <div class="mb-6 text-sm">
            <nav class="flex" aria-label="面包屑">
                <ol class="inline-flex items-center space-x-1 md:space-x-3">
                    <li class="inline-flex items-center">
                        <a href="#" class="inline-flex items-center text-gray-600 hover:text-primary">
                            <i class="fa fa-home mr-1"></i>
                            首页
                        </a>
                    </li>
                    <li>
                        <div class="flex items-center">
                            <i class="fa fa-angle-right text-gray-400 mx-1"></i>
                            <a href="#" class="text-primary font-medium">会员中心</a>
                        </div>
                    </li>
                </ol>
            </nav>
        </div>

        <!-- 会员页面标题 -->
        <div class="text-center mb-12">
            <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-dark mb-4">
                升级您的存储体验
            </h2>
            <p class="text-gray-600 max-w-2xl mx-auto">
                选择适合您的会员方案，解锁更多高级功能和更大存储空间
            </p>
        </div>

        <!-- 价格方案卡片 -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
            <!-- 基础版 -->
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover-scale transition-all-300">
                <div class="text-center mb-6">
                    <h3 class="text-xl font-bold text-dark mb-2">基础版</h3>
                    <p class="text-gray-500 text-sm mb-4">适合个人用户的基础需求</p>
                    <div class="flex items-center justify-center mb-4">
                        <span class="text-4xl font-bold text-dark">¥0</span>
                        <span class="text-gray-500 ml-1">/永久</span>
                    </div>
                    <button class="w-full py-3 bg-gray-200 text-gray-700 rounded-lg font-medium transition-all-300 hover:bg-gray-300">
                        已激活
                    </button>
                </div>
                
                <ul class="space-y-3">
                    <li class="flex items-start">
                        <i class="fa fa-check text-green-500 mt-1 mr-2"></i>
                        <span class="text-sm text-gray-600">5GB 存储空间</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fa fa-check text-green-500 mt-1 mr-2"></i>
                        <span class="text-sm text-gray-600">单文件最大 100MB</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fa fa-check text-green-500 mt-1 mr-2"></i>
                        <span class="text-sm text-gray-600">基础文件管理功能</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fa fa-check text-green-500 mt-1 mr-2"></i>
                        <span class="text-sm text-gray-600">社区技术支持</span>
                    </li>
                    <li class="flex items-start text-gray-400">
                        <i class="fa fa-times mt-1 mr-2"></i>
                        <span class="text-sm">无文件历史版本</span>
                    </li>
                    <li class="flex items-start text-gray-400">
                        <i class="fa fa-times mt-1 mr-2"></i>
                        <span class="text-sm">无高级加密</span>
                    </li>
                </ul>
            </div>
            
            <!-- 高级版 -->
            <div class="bg-white rounded-xl shadow-sm border-2 border-primary p-6 hover-scale transition-all-300 relative pricing-card-active">
                <div class="absolute -top-3 left-1/2 transform -translate-x-1/2 bg-primary text-white text-xs font-bold px-3 py-1 rounded-full">
                    最受欢迎
                </div>
                
                <div class="text-center mb-6">
                    <h3 class="text-xl font-bold text-dark mb-2">高级版</h3>
                    <p class="text-gray-500 text-sm mb-4">适合个人和小型团队</p>
                    <div class="flex items-center justify-center mb-4">
                        <span class="text-4xl font-bold text-dark">¥39</span>
                        <span class="text-gray-500 ml-1">/月</span>
                    </div>
                    <a href="/vip">
                        <button class="w-full py-3 bg-primary hover:bg-primary/90 text-white rounded-lg font-medium transition-all-300 shadow-sm hover:shadow-md">
                        立即升级
                        </button>
                    </a>
                    
                </div>
                
                <ul class="space-y-3">
                    <li class="flex items-start">
                        <i class="fa fa-check text-green-500 mt-1 mr-2"></i>
                        <span class="text-sm text-gray-600">100GB 存储空间</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fa fa-check text-green-500 mt-1 mr-2"></i>
                        <span class="text-sm text-gray-600">单文件最大 10GB</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fa fa-check text-green-500 mt-1 mr-2"></i>
                        <span class="text-sm text-gray-600">30天文件历史版本</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fa fa-check text-green-500 mt-1 mr-2"></i>
                        <span class="text-sm text-gray-600">高级文件加密</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fa fa-check text-green-500 mt-1 mr-2"></i>
                        <span class="text-sm text-gray-600">邮件技术支持</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fa fa-check text-green-500 mt-1 mr-2"></i>
                        <span class="text-sm text-gray-600">高级分享功能</span>
                    </li>
                </ul>
            </div>
            


        <!-- 常见问题 -->
        <div class="bg-white rounded-xl shadow-sm p-6">
            <h3 class="text-xl font-bold text-dark mb-6">常见问题</h3>
            
            <div class="space-y-4">
                <div class="border-b border-gray-100 pb-4">
                    <h4 class="font-medium text-dark mb-2">如何升级会员？</h4>
                    <p class="text-gray-600 text-sm">选择适合您的会员方案，点击"立即升级"按钮，按照支付流程完成付款即可。升级成功后，您将立即获得相应会员权益。</p>
                </div>
                
                <div class="border-b border-gray-100 pb-4">
                    <h4 class="font-medium text-dark mb-2">会员到期后会怎样？</h4>
                    <p class="text-gray-600 text-sm">会员到期后，您的账户将自动降级为基础版，存储空间将被限制为5GB。请及时续费以保留您的文件和高级功能。</p>
                </div>
                
                <div class="border-b border-gray-100 pb-4">
                    <h4 class="font-medium text-dark mb-2">可以更换会员方案吗？</h4>
                    <p class="text-gray-600 text-sm">是的，您可以随时升级或降级您的会员方案。升级时，系统将按剩余天数比例计算差价；降级时，新方案将在下一计费周期生效。</p>
                </div>
                
                <div>
                    <h4 class="font-medium text-dark mb-2">支持退款吗？</h4>
                    <p class="text-gray-600 text-sm">购买后7天内，如果您对服务不满意，可以申请全额退款。超过7天的会员费用将按剩余天数比例退还。</p>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white border-t border-gray-100 py-6">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between">
                <div class="flex items-center space-x-2 mb-4 md:mb-0">
                    <i class="fa fa-cloud text-primary text-xl"></i>
                    <span class="text-dark font-medium">文件管理系统</span>
                </div>
                
                <div class="text-sm text-gray-500">
                    &copy; 2023 文件管理系统. 保留所有权利.
                </div>
                
                <div class="flex space-x-4 mt-4 md:mt-0">
                    <a href="#" class="text-gray-500 hover:text-primary transition-all-300">
                        <i class="fa fa-github text-xl"></i>
                    </a>
                    </a>
                </div>
            </div>
        </div>
    </footer>
</body>
</html>